<nz-layout class="app-layout">
  <nz-sider [(nzCollapsed)]="isCollapsed" [nzTrigger]="null" class="menu-sidebar" nzBreakpoint="md"
            nzCollapsible nzWidth="256px">
    <div class="sidebar-logo">
      <span (click)="isCollapsed = !isCollapsed">
        <img alt="logo" src="https://ng.ant.design/assets/img/logo.svg">
        <h1>Ant Design Of Angular</h1>
      </span>
    </div>
    <ul *ngFor="let menu of menus" [nzInlineCollapsed]="isCollapsed" nz-menu nzMode="inline"
        nzTheme="dark">
      <li nz-submenu nzIcon="dashboard" nzOpen nzTitle="Dashboard">
        <ul>
          <li nz-menu-item nzMatchRouter>
            <a>Admin</a>
          </li>
        </ul>
      </li>

      <li [nzTitle]="menu.title" nz-submenu nzIcon="form" nzOpen>
        <ul *ngFor="let m of menu.childrenMenu">
          <li nz-menu-item nzMatchRouter>
            <a [queryParams]="{processName:m.processName}" [routerLink]="m.path">{{m.title}}</a>
          </li>
        </ul>
      </li>
    </ul>
  </nz-sider>
  <nz-layout>
    <nz-header>
      <div class="app-header" nz-row>
        <div nz-col nzLg="24" nzMd="24" nzSm="24" nzXl="23" nzXs="24" style="text-indent: 2em">
          123
        </div>
        <div nz-col nzLg="0" nzMd="0" nzSm="0" nzXl="1" nzXs="0">
          <span class="header-trigger" style="padding-left: 0">
            <nz-avatar [ngStyle]="{ 'background-color': color }" [nzDropdownMenu]="my"
                       [nzText]="text" nz-dropdown
                       nzPlacement="bottomRight" nzSize="large" style="vertical-align: middle;">
            </nz-avatar>
            <nz-dropdown-menu #my="nzDropdownMenu">
              <ul nz-menu>
                <li (click)="showModal()" nz-menu-item>个人信息</li>
                <li (click)="logout()" nz-menu-item>退出</li>
              </ul>
            </nz-dropdown-menu>
          </span>
        </div>
      </div>
    </nz-header>
    <nz-content>
      <div class="inner-content">
        <router-outlet></router-outlet>
      </div>
    </nz-content>
  </nz-layout>
</nz-layout>

<!--个人信息-->
<nz-modal (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" [(nzVisible)]="isVisible" nzTitle="The first Modal">
  <p>Content one</p>
  <p>Content two</p>
  <p>Content three</p>
  <p>Content three</p>
</nz-modal>
